<template>
    <div class="template-index-lu">
        <!-- <a-tabs type="card" @change="callback">
            <a-tab-pane v-for="(item,index) in tabList" :key="item.key" :tab="item.tabName">
            </a-tab-pane>
        </a-tabs> -->
        <commpVxeTable
                key="reCommpVxeTable"
                :config="dataTableConfig"
                :columns="columnsVxe"
                :formItem="formItem"
                @checkboxChange="checkboxChange"
                ref="administrativeOffice"
                @searchEvent="searchEvent"
                @resetEvent="resetEvent"
                >
                <template v-slot:externalOperations="{data}"  >
                    <vxe-form-item>
                        <template>
                        <a-button class="blue-btn" style="margin-right:10px;" type="primary" @click="addHandele" icon="plus">添加</a-button>
                        <a-button class="red-btn" type="primary" @click="deleteBatchHandele" icon="delete">批量删除</a-button>
                        </template>
                    </vxe-form-item>
                </template>
                <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
                    <a-form layout="inline" class="search-form" >
                        <a-form-item>
                            <a-button class="blue-btn" type="primary" @click="editHandele(row)" icon="edit">编辑</a-button>
                        </a-form-item>
                        <a-form-item>
                            <a-popconfirm
                                title="您确定要删除这条数据吗?"
                                ok-text="确定"
                                cancel-text="取消"
                                @confirm="deleteHandele(row)"
                                @cancel="cancel"
                                >
                                    <a-button class="red-btn" icon="delete">删除</a-button>
                            </a-popconfirm>
                        </a-form-item>
                    </a-form>
                </template>
                <template v-slot:operation_fhtzfjd="{row}" data-desc="自定操作栏">
                    <span>{{ fhtzfjdNum(row.fhtzfjd) }}</span>
                </template>
        </commpVxeTable>
      <handleModal ref="handleModalRef" :addType="addType" :passObj="passObj" @success="success"></handleModal>
    </div>
</template>
<script>
import assessCheckApi from './service/api.js'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import handleModal from './handleModal'
import { deletes,deleteBatch, } from './service/index.js'
export default {
    components: {
        commpVxeTable,handleModal
    },
    props:{
    },
    data() {
        return {
            reCommpVxeTable: '',
            tabList: [
                {key: '1',tabName: '收入合同'},
                {key: '2',tabName: '支出合同'},
            ],
            dataTableConfig: {
            api: assessCheckApi.list,
            rowId: 'id',
            urlType: true,
            paramet:{
                srzclx: '支出'
            }
            },
            formItem: [
                {
                    label: '合同编号',
                    model: 'fhtbh',
                },{
                    label: '合同名称',
                    model: 'fhtmc',
                },{
                    label: '合同状态',
                    model: 'fhtzt',
                },{
                    label: '签订时间',
                    model: 'qdsj',
                },{
                    label: '合同类别',
                    model: 'fhtlx',
                    type:'Select',
                    dictionaryType:'内控合同类型'
                },
            ],
            columnsVxe: [
            {
                type: 'checkbox',
                width: 60,
                fixed: 'left'
            },{
                title: '合同编号',
                field: 'fhtbh',
            },{
                title: '合同名称',
                field: 'fhtmc',
            },{
                title: '合同类型',
                field: 'fhtlx',
            },{
                title: '合同状态',
                field: 'fhtzt',
            },{
                title: '签订金额',
                field: 'fhtje',
                width: 100,
            },{
                title: '支付金额',
                field: 'fzfje',
                width: 100,
            },{
                title: '支付进度',
                field: 'fhtzfjd',
                width: 100,
                slots: {
                    default: 'operation_fhtzfjd',
                },
            },{
                title: '操作',
                field: 'jobid',
                slots: {
                // 使用插槽模板渲染
                default: 'operation_btn',
                },
            }
            ],
            idList: [],
            passObj: {},
            addType: '支出',
            tabKey: '1'
        }
    },
    methods: {
        callback(key){
            this.tabKey = key
            //console.log(key)
            if(key == '1'){
                this.dataTableConfig.paramet = {
                    srzclx: '收入'
                }
            } else {
                this.dataTableConfig.paramet = {
                    srzclx: '支出'
                }
            }
            //console.log( this.dataTableConfig.paramet)
            // this.reCommpVxeTable = Date.now()
            this.$refs.administrativeOffice.searchEvent()
        },
        // 勾选
        checkboxChange(val){
            //console.log('已选择',val)
            this.idList = []
            if(val.length){
                val.forEach(item => {
                    this.idList.push(item.id)
                });
            }
        },
        fhtzfjdNum(num){
            if(num){
                var number = Number(num * 100).toFixed(2) + '%'//保留两位小数
                return number
            }
        },
        // 搜索
        searchEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
            //console.log(this.dataTableConfig.paramet)
        },
        // 重置
        resetEvent(){
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
            }
        },
        addHandele(tabName){
            // if(this.tabKey == '1'){
            //     this.addType = '收入'
            // } else {
            //     this.addType = '支出'
            // }
            this.addType = '支出'
            this.$nextTick(_ => {
                this.$refs.handleModalRef.handleModalVisible = true
            })
        },
        // 编辑
        editHandele(row){
            this.passObj = row
            this.$nextTick(_ => {
                this.$refs.handleModalRef.handleModalVisible = true
            })
        },
        // 删除
        deleteHandele(row){
            deletes({id:row.id}).then(res => {
                if(res.code == 200){
                        this.$message.success(res.message)
                        //   this.reCommpVxeTable = Date.now()
                        this.success()
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        // 批量删除
        deleteBatchHandele(){
            let that = this
            if(that.idList.length == 0){
                that.$message.warning('请选择删除项目')
            } else {
                that.$confirm({
                    title: '您确定要删除这些数据吗?',
                    content: '',
                    okText: '确定',
                    okType: 'danger',
                    cancelText: '取消',
                    onOk() {
                        let list = that.idList.toString()
                        //console.log(list)
                        deleteBatch({ids:list}).then(res => {
                            //console.log(res)
                            if(res.code == 200){
                                //   that.reCommpVxeTable = Date.now()
                                that.$message.success(res.message)
                                that.success()
                            } else {
                                that.$message.warning(res.message)
                            }
                        })
                    },
                    onCancel() {
                        //console.log('Cancel');
                    },
                });
            }
        },
        cancel(){},
        // 弹窗提交成功
        success(){
            // 刷新表格 清空id数组
            this.$refs.administrativeOffice.searchEvent()
            this.idList = []
        },
    },
}
</script>
<style lang="less">
.red-btn{
    color:  white !important;
    border: 1px solid #ed5565 !important;
    background-color: #ed5565 !important;
}
.template-index-lu{
    .ant-tabs.ant-tabs-card {
        .ant-tabs-tab {
            font-size: 16px;
        }
        .ant-tabs-bar .ant-tabs-tab-active {
            background: #5ca3e5 !important;
            border-color: #5ca3e5 !important;
            color: #fff;
            font-size: 16px;
        }
    }
}
</style>
